<template>
  <div class="outer">
    <h2>Movie</h2>
    <h4>count 组件的状态: {{ count }}</h4>
    <h4>电影列表</h4>
    <div>
      <span>电影名长度</span>
      <select name="" v-model="filtrate">
        <option :value="{ start: 2, end: 8 }">2~8</option>
        <option :value="{ start: 3, end: 7 }">3~7</option>
        <option :value="{ start: 4, end: 5 }">4~5</option>
      </select>
    </div>
    <div class="inner">
      <div>
        <h2>全部电影</h2>
        <ul class="movieUl">
          <li class="movieLi" v-for="list in movieList" :key="list.albumId">
            {{ list.albumName }}
          </li>
        </ul>
      </div>
      <div>
        <h2>筛选过后的电影</h2>
        <ul class="movieUl">
          <li
            class="movieLi"
            v-for="list in filtrateMovieList"
            :key="list.albumId"
          >
            {{ list.albumName }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "Movie",
  data() {
    return {
      filtrate: {
        start: 2,
        end: 8,
      },
    };
  },
  computed: {
    ...mapState("Count", ["count"]),
    ...mapState("Movie", ["movieList"]),
    // ...mapGetters(["filtrateMovieList"]),
    /* myMovieList() {
      return this.$store.getters.myMovieList;
    }, */
    filtrateMovieList: {
      get() {
        return this.$store.getters["Movie/filtrateMovieList"](this.filtrate);
      },
      set(value) {},
    },
  },
  methods: {
    ...mapActions("Movie", ["getMovieListAction"]),
  },
  mounted() {
    this.getMovieListAction();
    // console.log(mapGetters(["filtrateMovieList"]))
    // console.log(this.filtrateMovieList)
    console.log(this, "movie this");
  },
};
</script>

<style scoped>
.outer {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.movieLi {
  list-style: none;
  padding: 10px;
}

.movieUl {
  height: 400px;
  overflow: auto;
}

.inner {
  display: flex;
}

h2 {
  text-align: center;
}
</style>